<!--
左滑栏
slot:
content: 内容
btn: 按钮
-->
<template>
    <g-touch class="container" @touchstart="touchstart" @touchend="touchend">
      <div class="content" :class="{'show':show}">
          <slot name="content">
              我是内容
          </slot>
      </div>
      <div class="btn"><slot name="btn">删除</slot></div>
    </g-touch>
</template>
<script>
  import touch from '../touch/index'
  export default {
    components: {
      'g-touch': touch
    },
    data() {
      return {
        x: '',
        show: false
      }
    },
    methods: {
      touchstart(x, y) {
        console.log(this.$el);
        this.x = x;
      },
      touchend(x, y) {
        if (this.x - x > 30) {
          this.show = true;
        }
        if (this.x - x < -30) {
          this.show = false;
        }
        this.x = '';
      }
    }
  }
</script>
<style lang="less" scoped>
@import url('../../style/mixin.less');
@import url('./theme.less');
  .container {
    width: 100%;
    height: @height;
    background: @background;
    overflow: hidden;
    text-align: center;
    line-height: @height;
    .content {
      width: 100%;
      height: @height;
      float: left;
      position: absolute;
      background: @content_background;
      left: 0;
      .transition(.5s);
      &.show {
        left: -@btn_width;
      }
    }
    .btn {
      width: @btn_width;
      height: @height;
      float: right;
      background: @btn_background;
      color: #FFF;
    }
  }

</style>
